<script setup lang="ts">
  import { reactive } from "vue";
  import { guild_roomApi } from "@/api/controller";
  import { ToastWarning, Toastloading } from "@/utils/public";
  import { getDateArray, getPlayEndTime } from '@/utils'
  import xmDatePicker from '@/components/xmDatePicker/index.vue';
  import Pagination from "@/components/Pagination/index.vue";
  import table2excel from 'js-table2excel';
  const action = reactive({
    dialogFormVisible: false,
    id: 0,
    total: 0,
    list: [],
    title:'',
    timeObj:getPlayEndTime(getDateArray('ymdhis'))
  });
  const listQuery = reactive({
    page:1,
    limit:20,
  })
  const handleSerach = () => {
    listQuery.page = 1;
    getList();
  };
  const getList = async () => {
    const loading = Toastloading();
    const { playTime, endTime } = action.timeObj
    const res = await guild_roomApi.roomWater(action.id, {
      ...listQuery,
      value:[playTime,endTime],
    });
    const { data = [], total = 0 } = res.data || {};
    action.list = data;
    action.total = total;
    loading.close();
  };
  const handleDownload = async()=>{
    const loading = Toastloading('数据导出中')
    const { playTime, endTime } = action.timeObj
    const res = await guild_roomApi.roomWater(action.id, {
      limit: 1000,
      page: 1,
      value:[playTime,endTime],
    })
    loading.close()
    const { data = [] } = res.data || {};
    const tHeader = [
      { title: '房间UID', key: "room_uid"},
      { title: '房间名', key: "name"},
      { title: '日期', key: "created_at"},
      { title: '财富值', key: "room_wealth_value"},
    ]
    table2excel(
      tHeader,
      data,
      action.title)
  }
  const openDialog = async (query: any = {}) => {
    const { id = 0, name=''} = query;
    if (!id) return ToastWarning("id not defing");
    action.id = id;
    action.title = `${name}-公会流水`
    listQuery.page = 1
    await getList();
    action.dialogFormVisible = true;
  };
  defineExpose({
    openDialog,
  });
</script>

<template>
  <div>
    <el-dialog
      top="5vh"
      class="xm-dialog"
      v-model="action.dialogFormVisible"
      width="60%"
      :title="action.title"
    >
      <div class="labelBox">
        <xmDatePicker type="daterange" v-model:timeval="action.timeObj" />
        <div class="labelItem">
          <el-button type="primary" @click="handleSerach"
            >查询</el-button
          >
          <el-button type="warning" @click="handleDownload"
            >导 出</el-button
          >
        </div>
      </div>
      <el-table :data="action.list" border height="450px">
        <el-table-column prop="room_uid" label="房间UID" align="center" />
        <el-table-column prop="name" label="房间名" align="center" />
        <el-table-column prop="created_at" label="日期" align="center" />
        <el-table-column prop="room_wealth_value" label="财富值" align="center"/>
      </el-table>
      <pagination
        v-show="action.total > 0"
        :total="action.total"
        v-model:page="listQuery.page"
        v-model:limit="listQuery.limit"
        @pagination="getList"
      />
    </el-dialog>
  </div>
</template>

<style lang="scss" scoped>
:deep(.xm-dialog) {
  .labelBox {
    width: 100%;
  }
  .el-dialog__body {
    padding: 10px 20px 20px;
  }
}
</style>
